<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; Charset=utf-8">
<meta http-equiv="Content-Language" content="zh-CN">
<meta name="viewport"
	content="width=device-width, initial-scale=1, user-scalable=no" />
<title th:text="${blog.title}"></title>
<link rel="shortcut icon" th:href="@{/images/Logo_40.png}"
	type="image/x-icon">
<!--Layui-->
<link th:href="@{/layui/css/layui.css}" rel="stylesheet" />
<!--font-awesome-->
<link th:href="@{/plug/font-awesome/css/font-awesome.min.css}"
	rel="stylesheet" />
<!--全局样式表-->
<link th:href="@{/css/global.css}" rel="stylesheet" />
<!-- 比较好用的代码着色插件 -->
<link th:href="@{/css/prettify.css}" rel="stylesheet" />
<!-- 本页样式表 -->
<link th:href="@{/css/detail.css}" rel="stylesheet" />
<style type="text/css">
pre {
	white-space: pre-wrap; /* css-3 */
	white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
	white-space: -pre-wrap; /* Opera 4-6 */
	white-space: -o-pre-wrap; /* Opera 7 */
	word-wrap: break-word; /* Internet Explorer 5.5+ */
}
</style>
</head>
<body>

	<!-- 导航 -->
	<nav class="blog-nav layui-header">
		<div class="blog-container">
			<!-- QQ互联登陆 -->
			<!-- <a target="_blank" th:href="@{/login}" class="blog-user"><span
				style="color: white;text-align: right;font-size: 15px;"> <i
					class="layui-icon" style="font-size: 15px;">&#xe614;</i></span> </a> -->
			<!-- <a href="javascript:;" class="blog-user layui-hide"> <img
				th:src="@{/images/Absolutely.jpg}" alt="jxnu-liguobin"
				title="jxnu-liguobin" />
			</a> -->
			<a class="blog-logo" th:href="@{/index/home.html}">梦境迷离</a>
			<!-- 导航菜单 layui2.2 更新，导致i失效 -->
			<ul class="layui-nav" lay-filter="nav">
				<li class="layui-nav-item"><a th:href="@{/index/home.html}"><i
						class="fa fa-home fa-fw"></i>&nbsp;网站首页</a></li>
				<li class="layui-nav-item"><a th:href="@{/index/article.html}"><i
						class="fa fa-file-text fa-fw layui-this"></i>&nbsp;文章专栏</a></li>
				<li class="layui-nav-item"><a
					th:href="@{/indexViews/resource.html}"><i
						class="fa fa-tags fa-fw"></i>&nbsp;资源分享</a></li>
				<li class="layui-nav-item"><a
					th:href="@{/indexViews/timeline.html}"><i
						class="fa fa-hourglass-half fa-fw"></i>&nbsp;点点滴滴</a></li>
				<li class="layui-nav-item"><a th:href="@{/index/about.html}"><i
						class="fa fa-info fa-fw"></i>&nbsp;关于本站</a></li>
			</ul>
			<!-- 手机和平板的导航开关 -->
			<a class="blog-navicon" href="javascript:;"> <i
				class="fa fa-navicon"></i>
			</a>
		</div>
	</nav>
	<!-- 主体（一般只改变这里的内容） -->
	<div class="blog-body">
		<div class="blog-container">
			<blockquote class="layui-elem-quote sitemap layui-breadcrumb shadow">
				<cite><a th:href="@{/index/home.html}" title="网站首页">网站首页</a></cite> <cite><a
					th:href="@{/index/article.html}" title="文章专栏">文章专栏</a> </cite> <cite><a
					th:text="${blog.title}">基于layui的laypage扩展模块！</a></cite>
			</blockquote>
			<div class="blog-main">
				<div class="blog-main-left">
					<!-- 文章内容（使用Kingeditor富文本编辑器发表的） -->
					<div class="article-detail shadow">
						<div class="article-detail-title">
							<span th:text="${blog.title}"></span>
						</div>
						<div class="article-detail-info">
							<span>发表时间：<span th:text="${blog.releaseDateStr}"></span></span>
							<span>作者：<span th:text="${blogger.nickName}"></span></span> <span>浏览量：<span
								th:text="${blog.clickHit}"></span></span><br> <span>标签：</span> <span
								th:each="key : ${blogKeys}"
								th:if="${not #lists.isEmpty(blogKeys)}"> <span
								class="layui-badge-rim layui-bg-gray" th:text="${key}"></span></span>
						</div>
						<div class="article-detail-content">
							<pre style="overflow:hidden">
								<p class="layui-text layui-elip" th:utext="${blog.content}"></p>
								</pre>
						</div>
						<hr>
					</div>
					<!-- 评论区域 -->
					<div class="blog-module shadow"
						style="box-shadow: 0 1px 8px #a6a6a6;">
						<div style="text-align: center;"id="cyReward" role="cylabs" data-use="reward"></div>
						<!--PC和WAP自适应版-->
						<div id="cyQing" role="cylabs" data-use="qing"></div>
						<div id="SOHUCS" th:sid="${blog.id}"></div>
						<script type="text/javascript"> 
					(function(){ 
							var appid = 'cytoujWAK'; 
							var conf = '569260efd41169f71a9a14d6ac7074d4'; 
							var width = window.innerWidth || document.documentElement.clientWidth; 
						if (width < 960) { 
							window.document.write('<script id="changyan_mobile_js" charset="utf-8" type="text/javascript" src="https://changyan.sohu.com/upload/mobile/wap-js/changyan_mobile.js?client_id=' + appid + '&conf=' + conf + '"><\/script>'); 
						} else { 
							var loadJs=function(d,a){
							var c=document.getElementsByTagName("head")[0]||document.head||document.documentElement;
							var b=document.createElement("script");b.setAttribute("type","text/javascript");b.setAttribute("charset","UTF-8");b.setAttribute("src",d);
						if(typeof a==="function"){
							if(window.attachEvent){b.onreadystatechange=function(){
								var e=b.readyState;if(e==="loaded"||e==="complete"){
								b.onreadystatechange=null;a()}}}
							else{
							b.onload=a}}c.appendChild(b)};loadJs("https://changyan.sohu.com/upload/changyan.js",
						function(){
						window.changyan.api.config({appid:appid,conf:conf})}); } })(); 
				</script>
					</div>
				</div>
				<div class="blog-main-right">
					<!--右边悬浮 平板或手机设备显示-->
					<div class="category-toggle">
						<i class="fa fa-chevron-left"></i>
					</div>
					<!--这个div位置不能改，否则需要添加一个div来代替它或者修改样式表-->
					<div class="article-category shadow">
						<div class="article-category-title"
							style="text-align: left;margin-left: 5px">文章分类</div>
						<!-- 点击分类后的页面和artile.html页面一样，只是数据是某一类别的 -->
						<i> <span th:each="blogType : ${blogTypeList}"
							th:if="${not #lists.isEmpty(blogTypeList)}"> <a
								th:href="@{'/index/home.html?typeId='+${blogType.id}}"> <span
									style="font-size: 15px; font-style:normal;margin-left: 1px;"
									th:text="${blogType.typeName}"></span></a>
						</span></i>
					</div>
					<div class="clear"></div>
					<div th:if="${#lists.isEmpty(blogTypeList)}">
						<span th:text="暂无信息！"></span>
					</div>
					<div class="blog-module shadow">
						<div class="blog-module-title">文章标签</div>
						<!-- 点击分类后的页面和artile.html页面一样，只是数据是某一类别的 -->
						<i> <span th:each="key,keyStat : ${keysMap}"
							th:if="${keyStat.count lt 21}"> <a
								th:href="@{'/blog/articles/'+${keyStat.current.value}}"> <span
									style="font-size: 15px;font-style: normal;"
									th:text="${keyStat.current.key}"></span></a>
						</span></i>
						<div class="clear"></div>
						<div th:if="${#lists.isEmpty(keysMap)}">
							<span th:text="暂无信息！"></span>
						</div>
					</div>
					<div class="blog-module shadow">
						<div class="blog-module-title">热门评论</div>
						<div  style="margin-left: 0px;margin-top: 28px;" id="cyReping" role="cylabs" data-use="reping"></div>
					</div>
					<div class="blog-module shadow" style="overflow:hidden;">
						<div class="blog-module-title">热评用户</div>
						<div style="margin-left: 0px;"  id="cyHotusers" role="cylabs" data-use="hotusers"></div>
					</div>
				</div>
				<div class="clear"></div>
			</div>
		</div>
	</div>
	<!-- 底部 -->
	<footer class="blog-footer">
		<p>
			<span>Copyright</span><span>&copy;</span><span>2017</span><a
				href="https://www.dreamylost.cn">梦境迷离</a><span>Design By
				jxnu-liguobin</span>
		</p>
		<p>
			<a href="http://www.miitbeian.gov.cn" target="_blank">赣ICP备17017283号-1</a>
		</p>
	</footer>
	<!--侧边导航-->
	<ul
		class="layui-nav layui-nav-tree layui-nav-side blog-nav-left layui-hide"
		lay-filter="nav">
		<li class="layui-nav-item"><a th:href="@{/index/home.html}"><i
				class="fa fa-home fa-fw"></i>&nbsp;网站首页</a></li>
		<li class="layui-nav-item layui-this"><a
			th:href="@{/index/article.html}"><i class="fa fa-file-text fa-fw"></i>&nbsp;文章专栏</a></li>
		<li class="layui-nav-item"><a
			th:href="@{/indexViews/resource.html}"><i
				class="fa fa-tags fa-fw"></i>&nbsp;资源分享</a></li>
		<li class="layui-nav-item"><a
			th:href="@{/indexViews/timeline.html}"><i
				class="fa fa-road fa-fw"></i>&nbsp;点点滴滴</a></li>
		<li class="layui-nav-item"><a th:href="@{/index/about.html}"><i
				class="fa fa-info fa-fw"></i>&nbsp;关于本站</a></li>
	</ul>
	<!--分享窗体-->
	<div class="blog-share layui-hide">
		<div class="blog-share-body">
			<div style="width: 200px;height:100%;">
				<div class="bdsharebuttonbox">
					<a class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a> <a
						class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a> <a
						class="bds_weixin" data-cmd="weixin" title="分享到微信"></a> <a
						class="bds_sqq" data-cmd="sqq" title="分享到QQ好友"></a>
				</div>
			</div>
		</div>
	</div>
	<!--遮罩-->
	<!-- 音乐播放器 -->
	<div id="QPlayer">
		<ol id="playlist"></ol>
		<div id="pContent">
			<div id="player">
				<span class="cover"></span>
				<div class="ctrl">
					<div class="musicTag marquee">
						<strong>Title</strong> <span> - </span> <span class="artist">Artist</span>
					</div>
					<div class="progress">
						<div class="timer left">0:00</div>
						<div class="contr">
							<div class="rewind icon"></div>
							<div class="playback icon"></div>
							<div class="fastforward icon"></div>
						</div>
						<div class="right">
							<div class="liebiao icon"></div>
						</div>
					</div>
				</div>
			</div>
			<div class="ssBtn">
				<div class="adf"></div>
			</div>
		</div>
	</div>

	<div class="blog-mask animated layui-hide"></div>
	<!-- layui.js -->
	<script th:src="@{/layui/layui.js}"></script>
	<!-- 自定义全局脚本 -->
	<script th:src="@{/js/global.js}"></script>
	<!-- 比较好用的代码着色插件 -->
	<script th:src="@{/js/prettify.js}"></script>
	<!-- 本页脚本 -->
	<script th:src="@{/js/jquery.min.js}"></script>
	<script th:src="@{/js/jquery.marquee.min.js}"></script>
	<script th:src="@{/js/player.js}"></script>
	<script type="text/javascript" th:inline="javascript">
    
  layui.use([ 'form', 'layedit','jquery','flow','element' ], function() {
	var form = layui.form;
	var flow = layui.flow;
	var $ = layui.jquery;
	var element = layui.element;
	var layedit = layui.layedit;
	//图片缩放
	window.onload = function() {  
      var w = $('.article-detail-content').width()-100;//设置最大宽度,也可根据img的外部容器 而动态获得,比如：$("#demo").width();  
      $("img").each(function() {//如果有很多图片,使用each()遍历   
            var img_w = $(this).width();//图片宽度   
            var img_h = $(this).height();//图片高度   
            if (img_w > w) {//如果图片宽度超出指定最大宽度   
                var height = (w * img_h) / img_w; //高度等比缩放   
                $(this).css( {  
                    "width" : w,"height" : height  
                });//设置缩放后的宽度和高度   
            }  
        });  
  
    } 
	 //评论和留言的编辑器
	var editIndex = layedit.build('content', {
		height : 150,
		tool : ['strong','italic','link','unlink','|','left', 'center', 'right', '|', 'face'],
	}); 
	//评论和留言的编辑器的验证
	 form.verify({
		content : function(value) {
			value = $.trim(layedit.getText(editIndex));
			if (value == "")
				return "至少得有一个字吧";
			layedit.sync(editIndex);
		}
	});
	//流加载
	//获得该文章的id
/* 	 	var blogId = [[${blog.id}]]
		var flow = layui.flow;
		flow.load({
	    elem: '#Lazy' //指定列表容器
	    ,done: function(page, next){ //到达临界点（默认滚动触发），触发下一页（也就相当于ajax中的sucess方法，回调作用）
	      var lis = [];//空数组
	      //以Ajax请求为例，请求下一页数据（注意：page是从2开始返回）
	        $.ajax({
				url:'/blog/commentLazy/list?blogId='+blogId,
				dataType:'json',
				type:'post',
				data:{
					page:page,
				},
				success:function(res){
						layui.each(res.data, function(index, item){			
				      		lis.push('<fieldset class="layui-elem-field layui-field-title"><legend style="font-size: 0.8em;text-align: left;">'
				      		+item.address+'网友  '
				 			+'</legend><div class="layui-field-box"><span style="color:red;font-size: 0.75em;float:right;"><span style="color:#808080">'+((index+1)+(res.currentPage-1)*10)+'楼</span>&nbsp;'
				 			+item.commentDateStr
				 			+'</span><br><div class="content" style="text-align: left;"><p>'
				      		+item.content+
				      		'</p></div></div></fieldset>'); 
				   }); 
				next(lis.join(''), page < res.count);
			}
		});}
		});  */
	form.on('submit(formLeaveMessage)', function(data) {
		//获取评论内容 带标记
		var content = layedit.getContent(editIndex);
		var blogId = [[${blog.id}]];
		var code = $("#code").val();
		$.ajax({
			async : false,
			url : '../comment/save',
			data : {
				'content' : content,
				'blog.id' : blogId,
				'code' : code,
			},
			type : 'post',
			success : function(result) {
					if(typeof result ==='string'){
						result = JSON.parse(result);
					}
					console.log(result)
					if (result.success) {
						layer.alert('评论成功，您的评论将在审核后显示！', {
							title : '系统提示',
							icon : 6,
							closeBtn: 0,//隐藏关闭按钮
						}, function(index) {
							layer.close(index); //关闭'
							location.reload();
							$('#code').val("");
							$('#LAY_layedit_1').contents().find('body').html('');//清空
						});
					} if (!result.success) {
							var error = result.errorInfo
							console.log(error);
							$('#error').text(error); //设置span标签的值
							return false;
					}
			}
		});
		return false;
	}); 
	
	//注册自定义函数
	var $ = layui.$,
    active = {
        /**
		 *定义函数绑定到按钮的data-type上 delBlogType
		 */
        refresh: function() {
       	    var imgSrc = $("#imgObj");  
	        var src = '/blog/redisValidateCode';
	        var url = src;
	        var timestamp = (new Date()).valueOf();  
	        var index = url.indexOf("?",url);  
	        if (index > 0) {  
	            url = url.substring(0, url.indexOf(url, "?"));  
	        }  
	        if ((url.indexOf("&") >= 0)) {  
	            url = url + "×tamp=" + timestamp;  
	        } else {  
	            url = url + "?timestamp=" + timestamp;  
	        } 
	        imgSrc.attr("src", url);  
        },
       }
       
	 $('.layui-form-item .layui-btn-primary').on('click',
	    function() {
	        var type = $(this).data('type');
	        active[type] ? active[type].call(this) : '';
	    });
	 $('.layui-form-item .layui-btn-xs').on('click',
	    function() {
	        var type = $(this).data('type');
	        active[type] ? active[type].call(this) : '';
	    });
	
});
</script>
	<script th:src="@{/js/jquery.min.js}"></script>
	<script th:inline="javascript" type="text/javascript">
$(window).load(function(){
     $("pre").addClass("prettyprint linenums");
     prettyPrint();
})
</script>
<script type="text/javascript" charset="utf-8" src="https://changyan.itc.cn/js/lib/jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="https://changyan.sohu.com/js/changyan.labs.https.js?appid=cytoujWAK"></script>
</body>
</html>